<!--
 * @Description: 编辑资料
 * @Author: liu (1427179517@qq.com)
 * @Date: 2023-05-05 09:31:21
 * @LastEditors: liu (1427179517@qq.com)
 * @LastEditTime: 2023-05-11 14:54:13
 * @FilePath: \jiekuan-app\src\subPages\other\editProfile.vue
-->

<template>
	<div class="page">
		<div class="page-header">
			<u-navbar title="编辑资料" :background="nav_background" title-color="#fff" back-icon-color="#fff" :height="60"
				:border-bottom="false">
				<span slot="right" class="invite_code" @click="apiPostUpdateInfo">保存 </span>
			</u-navbar>
		</div>
		<div class="page-content u-p-35">
			<div class="u-flex all-center">
				<image :src="form_msg.icon" class="avatar" @click="handleImg" alt="" />
			
			</div>
			<div class="u-m-t-30 title u-m-b-20">基本资料</div>
			<u-form :model="form_msg" ref="uForm" label-width="125" :label-style="labelStyle" :border-bottom="false"
				class="form_box">
				<u-form-item label="昵称" :border-bottom="false">
					<u-input v-model="form_msg.nickname" :custom-style="customStyle"
						:placeholder-style="placeholderStyle" :clearable="false" placeholder="请输入昵称" />
				</u-form-item>
				<u-form-item label="生日" :border-bottom="false">
					<u-input v-model="form_msg.birth" type="select" @click="isBirthdayShow = true" placeholder="请选择出生日期"
						:placeholder-style="placeholderStyle" :clearable="false" />
					<u-picker mode="time" v-model="isBirthdayShow" :params="params" @confirm="handlePicker"></u-picker>
				</u-form-item>
				<u-form-item label="性别" :border-bottom="false">
					<u-radio-group v-model="form_msg.gender" size="25">
						<u-radio v-for="(item, index) in genderList" :key="index" :name="item.value">
							<span :style="placeholderStyle">{{ item.name }}</span>
						</u-radio>
					</u-radio-group>
				</u-form-item>
				<u-form-item label="身高" :border-bottom="false">
					<u-input v-model="form_msg.height" :custom-style="customStyle" :placeholder-style="placeholderStyle"
						:clearable="false" type="number" placeholder="请输入身高" />
				</u-form-item>
				<u-form-item label="体重" :border-bottom="false">
					<u-input v-model="form_msg.weight" :custom-style="customStyle" :placeholder-style="placeholderStyle"
						:clearable="false" type="number" placeholder="请输入体重" />
				</u-form-item>
				<u-form-item label="职业" :border-bottom="false">
					<u-input v-model="form_msg.job" :custom-style="customStyle" :placeholder-style="placeholderStyle"
						:clearable="false" placeholder="请输入职业" />
				</u-form-item>
				<u-form-item label="个人简介" :border-bottom="false" label-position="top">
					<u-input v-model="form_msg.personalizedSignature" placeholder="请输入个人简介" type="textarea" height="280"
						class="textarea_box" :placeholder-style="placeholderStyle" :clearable="false" />
				</u-form-item>
				<u-form-item label="阅后即燃" :border-bottom="false">
					<div class="u-flex flex-end flex-1">
						<u-switch v-model="checked" active-color="#fcc307"></u-switch>
					</div>
				</u-form-item>
			</u-form>
			<div class="album u-m-t-40 u-m-b-28">相册 （{{ albumList.length }}/9）</div>
			<div class="imgs">
				<div class="imgs_view" v-for="(item,index) in albumList" :key="index">
					<div class="imgs_view_img">
						<video v-if="item.fileType == 'video'" :src="item.url"></video>
						<image @click="preview_img(item.url)" v-else :src="item.url" mode="aspectFill"></image>
						<div v-if="item.fileType == 'video'" @click="preview_video(item.url)"></div>
					</div>
				</div>
				<uploadView uploadText="" ref="upload" moduleName="upload" :maxCount="9" @onChange="handleUploadChange"
					@onPreview="handleUploadPreview" @onRemove="handleUploadRemove" class="uploadViewId" :width="200"
					:height="200">
				</uploadView>
			</div>
			<div class="popup" v-if="video_url">
				<image @click="video_url = null" src="../../static/images/authentication_close.png" mode=""></image>
				<video :src="video_url"></video>
			</div>

			<div class="avatar avatar_upload" @click.stop="">
				<uploadView uploadText="" ref="avatar" moduleName="avatar" :maxCount="9" :fileList="avatarList"
					@onChange="handleUploadChange" @onPreview="handleUploadPreview" @onRemove="handleUploadRemove"
					class="avatar_upload" fileType="img" :width="1" :height="1">
				</uploadView>
			</div>
			<!-- <video :src="video" class="avatar" @click="handleImg" alt="" /> -->
		</div>
		<div class="page-footer"></div>
	</div>
</template>

<script>
	import uploadView from '@/components/yl-uploadView'
	export default {
		name: 'EditProfile', // 页面名称
		components: {
			uploadView
		}, // 挂载组件
		props: {}, // 组件传值
		data() {
			return {
				nav_background: {
					background: 'transparent'
				},
				form_msg: {
					icon: '', // 头像
					nickname: '', // 昵称
					birth: '', // 出生日期
					height: '', // 身高
					weight: '', // 体重
					job: '', // 职业
					gender: 0, // 性别
					personalizedSignature: '', // 简介
					detailLocation: '', // 详细地址
					latitude: '', // 纬度
					longitude: '', // 经度
					province: '', // 省/直辖市
					city: '', // 市
					region: '', // 区
				}, // 表单数据
				checked: false, // 阅后即燃
				albumList: [], // 相册
				labelStyle: {
					color: '#fff',
					fontSize: '25rpx'
				}, // 表单标题
				placeholderStyle: 'color: #c0c4cc; font-size: 25rpx', // 输入框提示
				customStyle: {
					color: '#fff',
					fontSize: '25rpx'
				}, // 输入框文字
				params: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false,
				}, // 时间选择
				isBirthdayShow: false, // 时间选择器
				genderList: [{
						name: '未知',
						value: 0,
					},
					{
						name: '男',
						value: 1,
					},
					{
						name: '女',
						value: 2,
					},
				], // 性别
				avatarList: [], // 头像预览
				video: '',
				video_url: ""
			}
		},
		computed: {}, // 计算机属性 类似与data概念
		watch: {}, // 监控data中数据变化
		created() {}, // 生命周期-创建完成(可以访问当前this实例)
		mounted() {}, // 生命周期-挂载完成(可以访问DOM元素)
		methods: {
			// 获取用户相册信息
			apiGetAlbumInfo() {
				this.$showLoading('加载中...')
				this.$u.api.GetAlbumInfo().then((res) => {
					const list = []
					res.data.forEach((item) => {
						const msg = {
							url: item.sourceUrl,
							fileType: item.sourceType ? 'video' : '',
						}
						list.push(msg)
					})
					console.log(list);
					this.albumList = list
				}).finally(() => {
				  uni.hideLoading()
				})
			},
			/**
			 * @author: liu (1427179517@qq.com)
			 * @description: 时间选择回调
			 * @param {*} options
			 * @return {*}
			 * @Date: 2023-05-05 10:02:47
			 */
			handlePicker(options) {
				const {
					year,
					month,
					day
				} = options
				const birth = year + '-' + month + '-' + day
				this.form_msg.birth = birth
			},
			// 获取位置
			getNowLocation() {
				this.$getNowLocation({
					success: (res) => {
						console.log('精准定位', res)
						this.form_msg.latitude = res.latitude
						this.form_msg.longitude = res.longitude
						this.$getAmapCode({
							longitude: res.longitude,
							latitude: res.latitude,
							callback: (newRes) => {
								this.form_msg.province = newRes.data.regeocode.addressComponent
									.province
								this.form_msg.city = newRes.data.regeocode.addressComponent.city
								this.form_msg.region = newRes.data.regeocode.addressComponent
									.district
								const detailLocation = newRes.data.regeocode.formatted_address
									.split(
										newRes.data.regeocode.addressComponent.district
									)
								if (detailLocation.length === 2) {
									this.form_msg.detailLocation = detailLocation[1]
								} else if (detailLocation.length > 2) {
									this.form_msg.detailLocation =
										detailLocation[1] + newRes.data.regeocode.addressComponent
										.district + detailLocation[2]
								}
							},
						})
					},
				})
			},
			// 保存用户信息
			apiPostUpdateInfo() {
				this.$showLoading('正在保存...')
				this.$u.api.PostUpdateInfo(this.form_msg).then((res) => {
					this.$toast('修改资料成功')
					setTimeout(() => {
						uni.navigateBack()
					}, 2000)
				}).finally(() => {
				  uni.hideLoading()
				})
			},
			// 获取用户信息
			apiGetInfo() {
				this.$showLoading('加载中...')
				this.$u.api.info().then((res) => {
					for (const key in this.form_msg) {
						if (key === 'birth' && res.data.birthday) {
							const birth_err = res.data.birthday.split(' ')
							const birth = birth_err[0].replaceAll('/', '-')
							this.form_msg.birth = birth
						} else {
							this.form_msg[key] = res.data[key]
						}
					}
				}).finally(() => {
				  uni.hideLoading()
				})
			},
			// 上传照片
			handleImg() {
				var that = this;
				// this.handleUploadRemove({ moduleName: 'avatar' })
				this.$refs.avatar.$refs.uUpload.selectFile()
			},
			// 相册更新/图片/视频上传
			apiPostUpdateAlbum(type, img) {
				this.$showLoading('上传中...')
				const params = {
					approveFlag: 0,
					sourceType: type,
					sourceUrl: img,
					readType: this.checked ? 1 : 0,
				}
				this.$u.api.PostUpdateAlbum(params).then((res) => {}).finally(() => {
				  uni.hideLoading()
				})
			},
			// 上传图片
			apiuploadToQiniu(img) {
				this.$u.api
					.uploadToQiniu({
						file: img
					})
					.then((res) => {
						this.err = JSON.stringify(res)
						console.log('上传成功=====》》》》', res)
					})
					.catch((err) => {
						this.err = JSON.stringify(err)
						console.log('上传失败=====》》》》', err)
					})
			},
			/**
			 * @author: yiling (315800015@qq.com)
			 * @description: 全屏预览图片时触发
			 * @param {String} url 为当前选中的图片地址
			 * @param {Array} lists 目前组件内的所有图片数组，index为通过props传递的index参数
			 * @param {Number} name 为通过props传递的index参数(1.6.1加入)
			 * @return {*}
			 * @Date: 2021-04-17 11:36:57
			 */
			handleUploadPreview(options) {
				uni.setStorageSync('uploadRefresh', true)
			},
			/**
			 * @author: yiling (315800015@qq.com)
			 * @description: 移除图片时触发
			 * @param {Number} index 索引
			 * @param {Array} lists 完整数据
			 * @param {Number} name 通过props传递的index参数
			 * @return {*}
			 * @Date: 2021-04-18 13:09:47
			 */
			handleUploadRemove(options) {
				const {
					index,
					lists,
					name,
					moduleName
				} = options
				console.log('onRemove', options)
				if (moduleName === 'avatar') {
					this.form_msg.icon = ''
					this.avatarList = []
				} else {
					this.albumList.splice(index, 1)
				}
			},
			/**
			 * @author: yilingsj（315800015@qq.com）
			 * @description: 上传后触发
			 * @param {type}
			 * @return:
			 * @Date: 2020-07-20 10:43:06
			 */
			handleUploadChange(options) {
				console.log(options, '引用后上传结束')
				const {
					res,
					index,
					lists,
					moduleName
				} = options
				const data = JSON.parse(res.data)
				if (moduleName === 'avatar') {
					this.form_msg.icon = data.data
					this.avatarList = [{
						url: data.data
					}]
				} else {
					const suffixArr = lists[index].url.split('.')
					if (['png', 'jpg', 'jpeg', 'webp', 'gif', 'image'].includes(suffixArr[1])) {
						this.albumList.push({
							url: data.data
						})
						this.apiPostUpdateAlbum(0, data.data)
					} else {
						this.video = data.data
						this.albumList.push({
							url: data.data,
							fileType: 'video'
						})
						this.apiPostUpdateAlbum(1, data.data)
					}
				}
			},
			preview_img: function(url) {
				console.log(url);
				uni.previewImage({
					urls: [url]
				})
			},
			preview_video: function(url) {
				var that = this;
				that.video_url = url;
			}
		}, // 挂载一些方法
		onLoad(options) {
			this.apiGetInfo()
			this.apiGetAlbumInfo()
			console.log('onLoad', options, Date.now())
		}, // 生命周期回调—监听页面加载
		onShow() {}, // 生命周期回调—监听页面显示
		onReady() {}, // 生命周期回调—监听页面初次渲染完成
		onHide() {}, // 生命周期回调—监听页面隐藏
		onUnload() {}, // 生命周期回调—监听页面卸载
	}
</script>

<style lang="scss" scoped>
	.page {
		background-image: url('http://minio.tianhong.mobi/mall/xiaoq/home_bg.png');
		height: 100vh;
		background-size: cover;
		background-repeat: no-repeat;
	}

	.page-header,
	.page-content {
		background: transparent;
	}

	.invite_code {
		width: 80rpx;
		height: 45rpx;
		background: #fcc307;
		border-radius: 23rpx;
		font-size: 21rpx;
		font-family: Microsoft YaHei UI;
		font-weight: 400;
		color: #ffffff;
		text-align: center;
		display: inline-block;
		line-height: 45rpx;
		margin-right: 30rpx;
	}

	.avatar {
		width: 180rpx;
		height: 180rpx;
		border-radius: 50%;
		background-color: #fff;
	}

	.title {
		font-size: 31rpx;
		font-family: Microsoft YaHei UI;
		font-weight: 400;
		color: #ffffff;
	}

	.form_box .u-form-item {
		padding: 10rpx 0;
	}

	.form_box ::v-deep .u-input__input {
		color: #ffffff;
	}

	.form_box ::v-deep .u-input__right-icon {
		opacity: 0;
	}

	.textarea_box {
		border-radius: 5rpx;
		background-color: #fff;
		padding: 10rpx 20rpx !important;
	}

	.textarea_box ::v-deep .u-input__textarea {
		color: #000;
	}

	.textarea_box ::v-deep .uni-textarea-wrapper {
		height: 100% !important;
	}

	.album {
		font-size: 31rpx;
		font-family: Microsoft YaHei UI;
		font-weight: 400;
		color: #ffffff;
	}

	.avatar_upload {
		position: absolute;
		top: 0;
		left: 0;
		width: 0;
		height: 0;
		opacity: 0;
	}

	.imgs {
		width: 100%;
		min-height: 200rpx;
		display: flex;
		flex-wrap: wrap;

		.imgs_view {
			flex: 0 0 33%;
			margin-bottom: 20rpx;

			.imgs_view_img {
				position: relative;
				display: block;
				width: 208rpx;
				height: 208rpx;
				margin: 0 auto;

				image {
					display: block;
					width: 100%;
					height: 100%;
				}

				video {
					display: block;
					width: 100%;
					height: 100%;
				}

				div {
					position: absolute;
					width: 100%;
					height: 100%;
					top: 0;
					left: 0;
					z-index: 10;
				}
			}
		}
	}

	.popup {
		position: fixed;
		width: 100vw;
		height: 100vh;
		top: 0;
		left: 0;
		z-index: 1000;
		background: rgba(0, 0, 0, .7);
		box-sizing: border-box;
		padding-top: 50vh;

		video {
			display: block;
			width: 100%;
			margin-top: -50%;
		}

		image {
			position: absolute;
			width: 50px;
			height: 50px;
			top: 20px;
			right: 20px;
		}
	}
</style>
